home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Window and Frames / collapsible-frame.izs < prev    next >
Text File  |  2005-09-02  |  6KB  |  151 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Collapsible Frame Script
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>If your site uses frames, a fantastic feature to add would be the ability to collapse/expand a particular frame on user demand. This allows a frame to be tucked away when it's not needed. Well, this script enables you to do just that. It works on any straightforward "columns" or "rows" frames setup, and script works in both IE4+ and NS6+. Note that this script is not compatible with pages that use a combination of both frame columns and rows.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>window and frames<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the below code in the <head> section of the "master" frame page (the page containing the <frameset> tags): -->
  16. <script type="text/javascript">
  17.  
  18. /***********************************************
  19. * Collapsible Frames script- ⌐ Dynamic Drive (www.dynamicdrive.com)
  20. * This notice must stay intact for use
  21. * Visit http://www.dynamicdrive.com/ for full source code
  22. ***********************************************/
  23.  
  24. var columntype=""
  25. var defaultsetting=""
  26.  
  27. function getCurrentSetting(){
  28. if (document.body)
  29. return (document.body.cols)? document.body.cols : document.body.rows
  30. }
  31.  
  32. function setframevalue(coltype, settingvalue){
  33. if (coltype=="rows")
  34. document.body.rows=settingvalue
  35. else if (coltype=="cols")
  36. document.body.cols=settingvalue
  37. }
  38.  
  39. function resizeFrame(contractsetting){
  40. if (getCurrentSetting()!=defaultsetting)
  41. setframevalue(columntype, defaultsetting)
  42. else
  43. setframevalue(columntype, contractsetting)
  44. }
  45.  
  46. function init(){
  47. if (!document.all && !document.getElementById) return
  48. if (document.body!=null){
  49. columntype=(document.body.cols)? "cols" : "rows"
  50. defaultsetting=(document.body.cols)? document.body.cols : document.body.rows
  51. }
  52. else
  53. setTimeout("init()",100)
  54. }
  55.  
  56. setTimeout("init()",100)
  57.  
  58. </script>
  59. <!-- Step 2: Once the script is installed, all that remains is invoking the resizeFrame() function anywhere within one of your frames' pages and in the desired format (ie: via text link, a form button etc). Here's an example, with which you can add inside any one of your frames' pages:
  60.  
  61. <a href="javascript:parent.resizeFrame('5,*')">Contact/Expand Top Frame</a>
  62. Function resizeFrame() accepts one parameter- a string containing the new frames' rows or cols setting once it's collapsed. It uses the exact same syntax employed in HTML to control your frames' dimensions, so a value of '5,*' for example, means that the first frame should be 5 pixels in dimension, and the second frame filled to occupy the remaining space when the former is collapsed. Clicking on the above link again returns the frames to their original set up.
  63.  
  64. In the following example, a button completely collapses the bottom (or right if using columns) frame when clicked on:
  65.  
  66. <form>
  67. <input type="button" onClick="parent.resizeFrame('*,0')" value="Click here">
  68. </form>
  69. You can be as creative as you want in calling resizeFrame(); how about invoking it when the user double clicks on the target frame to collapse it?
  70.  
  71. <script>
  72. document.ondblclick=function(){
  73. parent.resizeFrame('1%, 50%, 49%')
  74. }
  75. </script>
  76. As you can see, this script can be as versatile as you want it to be!
  77.  -->
  78.  
  79. <!-- END OF SCRIPT -->
  80. <!/SCRIPT>
  81.  
  82. <!PREVIEW>
  83. <!-- START OF SCRIPT -->
  84. <!-- Step 1: Insert the below code in the <head> section of the "master" frame page (the page containing the <frameset> tags): -->
  85. <script type="text/javascript">
  86.  
  87. /***********************************************
  88. * Collapsible Frames script- ⌐ Dynamic Drive (www.dynamicdrive.com)
  89. * This notice must stay intact for use
  90. * Visit http://www.dynamicdrive.com/ for full source code
  91. ***********************************************/
  92.  
  93. var columntype=""
  94. var defaultsetting=""
  95.  
  96. function getCurrentSetting(){
  97. if (document.body)
  98. return (document.body.cols)? document.body.cols : document.body.rows
  99. }
  100.  
  101. function setframevalue(coltype, settingvalue){
  102. if (coltype=="rows")
  103. document.body.rows=settingvalue
  104. else if (coltype=="cols")
  105. document.body.cols=settingvalue
  106. }
  107.  
  108. function resizeFrame(contractsetting){
  109. if (getCurrentSetting()!=defaultsetting)
  110. setframevalue(columntype, defaultsetting)
  111. else
  112. setframevalue(columntype, contractsetting)
  113. }
  114.  
  115. function init(){
  116. if (!document.all && !document.getElementById) return
  117. if (document.body!=null){
  118. columntype=(document.body.cols)? "cols" : "rows"
  119. defaultsetting=(document.body.cols)? document.body.cols : document.body.rows
  120. }
  121. else
  122. setTimeout("init()",100)
  123. }
  124.  
  125. setTimeout("init()",100)
  126.  
  127. </script>
  128. <!-- Step 2: Once the script is installed, all that remains is invoking the resizeFrame() function anywhere within one of your frames' pages and in the desired format (ie: via text link, a form button etc). Here's an example, with which you can add inside any one of your frames' pages:
  129.  
  130. <a href="javascript:parent.resizeFrame('5,*')">Contact/Expand Top Frame</a>
  131. Function resizeFrame() accepts one parameter- a string containing the new frames' rows or cols setting once it's collapsed. It uses the exact same syntax employed in HTML to control your frames' dimensions, so a value of '5,*' for example, means that the first frame should be 5 pixels in dimension, and the second frame filled to occupy the remaining space when the former is collapsed. Clicking on the above link again returns the frames to their original set up.
  132.  
  133. In the following example, a button completely collapses the bottom (or right if using columns) frame when clicked on:
  134.  
  135. <form>
  136. <input type="button" onClick="parent.resizeFrame('*,0')" value="Click here">
  137. </form>
  138. You can be as creative as you want in calling resizeFrame(); how about invoking it when the user double clicks on the target frame to collapse it?
  139.  
  140. <script>
  141. document.ondblclick=function(){
  142. parent.resizeFrame('1%, 50%, 49%')
  143. }
  144. </script>
  145. As you can see, this script can be as versatile as you want it to be!
  146.  -->
  147.  
  148. <!-- END OF SCRIPT -->
  149. <!/PREVIEW>
  150.  
  151. <!RELATED>NONE<!/RELATED>